<template>
  <Modal
    :styles="{top: '20px',bottom:'20px',width:'90%',}"
    :scrollable=false :closable=true v-model="isShow" :mask-closable="false"  @on-visible-change="modalStatus">
    <div>
      <Tabs ref="tabs" style="margin: 10px">
        <TabPane label="订单概况" name="order">
          <Row style="margin-bottom: 16px;" type="flex" justify="end">
            <i-col span="24" class="y_query_right" >
              <Button type="primary" icon="ios-download-outline" @click="pendingOffline()" class="y_condition"
                      v-if="orderDetail.state == 100 || orderDetail.state == 101 || orderDetail.state == 104" v-has="tRole.ORDER_1_230">线下收款挂起</Button>
              <Button type="primary" icon="ios-download-outline" @click="showOfflineConfirmModal()" class="y_condition"
                      v-if="orderDetail.state == 116 && orderDetail.payWay == 0" v-has="tRole.ORDER_1_230">确认线下收款</Button>
              <Button type="primary" icon="ios-download-outline" @click="webExportOrderBlank(orderDetail)" class="y_condition"
                      v-if="!orderDetail.isHistoryOrder && orderDetail.state >= 110" v-has=tRole.ORDER_1_207>导出配货单
              </Button>
              <Button type="primary" icon="ios-download-outline" @click="webExportInvoice(orderDetail)" class="y_condition"
                  v-has=tRole.ORDER_1_208
                  v-if="!orderDetail.isHistoryOrder && ((orderDetail.state >= 110 && orderDetail.state < 130 && orderDetail.state != 121) || orderDetail.state == 140)">导出发货单
              </Button>

              <Button type="primary" icon="ios-download-outline" @click="showExportInvoiceModal(orderDetail)" class="y_condition"
                      v-if="invoiceExportable()" v-has="tRole.ORDER_1_227">导出发票</Button>
            </i-col>
          </Row>

          <Row >
            <i-col :xs="{ span:24, offset: 0 }"  :sm="{ span: 8, offset:0 }" style="padding: 0.5rem  0.25rem" >
              <Card >
                <p slot="title">基本信息</p>
                <div>
                  <p><span class="key">订单编号 : </span> {{orderDetail.serialNumber}}<span v-if="orderDetail.firstOrder==1 || orderDetail.firstOrder==2" style="color: #f20077;font-weight: 600">（{{orderDetail.firstOrder==1?'首单':'复购'}}）</span></p>
                  <p><span class="key">订单状态 :</span> {{getDictName('orderStateDict',orderDetail.state)}}</p>
                  <p><span class="key">购买者 :</span> {{orderDetail.encodeName}}</p>
                  <p><span class="key">用户标签 :</span> <span style="color: #f20077;font-weight: 600">{{userTag}}</span></p>
                  <p><span class="key">打包方式 :</span> <span style="color: #f20077;font-weight: 600" v-text="needBox">

                  </span></p>
                  <p v-if="orderDetail.checkoutTime"><span class="key">付款时间 :</span> {{getFormatedDateTime(orderDetail.checkoutTime)}}</p>
                  <p v-else><span class="key">下单时间 :</span> {{getFormatedDateTime(orderDetail.createtime)}}</p>
                </div>
              </Card>
            </i-col>
            <i-col :xs="{ span:24, offset: 0 }"  :sm="{ span: 10, offset:0 }" style="padding: 0.5rem  0.25rem">
              <Card >
                <p slot="title">支付信息</p>
                <p >
                  <span class="key" style="width:140px;max-width: 150px;">支付方式 : </span>{{getDictName('payTypeDict',orderDetail.payWay)}}
                  <Button type="info" size="small" icon="ios-document-outline" @click="showCreditCard()"
                          ghost v-if="orderDetail.payWay == 112" v-has=tRole.ORDER_1_228>卡号</Button>
                </p>
                <p v-if="orderDetail.creditCard"><span class="key" style="width:140px;max-width: 150px;">支付卡号 : </span>{{orderDetail.creditCard.cardNumber}}</p>
                <p><span class="key" style="width:140px;max-width: 150px;">产品总价 : </span>${{this._.round(orderDetail.actualPayment - orderDetail.postage,2)}}</p>
                <p><span class="key" style="width:140px;max-width: 150px;">物流配送费 : </span>${{orderDetail.postage}}</p>
                <p><span class="key" style="width:140px;max-width: 150px;">订单原价: </span>${{orderDetail.originalPrice}}</p>
                <p><span class="key" style="width:140px;max-width: 150px;">实际付款:</span> ${{orderDetail.actualPayment}}</p>
                <p>
                  <Button type="primary" icon="ios-document-outline" @click="showPaymentRecord(orderDetail)" class="y_condition"
                    v-if="orderDetail.state >= 110" v-has=tRole.ORDER_1_220>查看款项记录</Button>
                  <Button type="primary" icon="ios-document-outline" @click="showOrderDiscounts(orderDetail.id)" class="y_condition"
                           v-if="orderDetail.originalPrice > orderDetail.actualPayment" >查看优惠项</Button>
                </p>
              </Card>
            </i-col>
            <i-col :xs="{ span:24, offset: 0 }"  :sm="{ span: 6, offset:0 }" style="padding: 0.5rem 0.25rem">
              <Card >
                <p slot="title">产品信息</p>
                <p><span class="key">款式数量 :</span> {{orderDetail.skuCount}}个</p>
                <p><span class="key">产品总量 :</span> {{orderDetail.productCount}}个</p>
                <p><span class="key">产品总重 :</span> {{orderDetail.weight/1000}}kg</p>
              </Card>
            </i-col>
          </Row>
          <Card style="margin-top: 10px" v-if="orderDetail.receiverInfo && orderDetail.receiverInfo.userFullName">
            <p slot="title">物流和备注</p>
            <Row style="margin-bottom: 16px;" type="flex" justify="end" :gutter="10" v-if="!orderDetail.isHistoryOrder">
              <i-col span="24" class="y_query_right">
                <Button type="info" icon="md-copy" @click="copyAddress(orderDetail.receiverInfo)" class="y_condition"
                        v-has=tRole.ORDER_1_219>拷贝物流发货信息</Button>
                <Button type="primary" icon="md-add" @click="showEditNote(orderDetail)" class="y_condition"
                        v-has=tRole.ORDER_1_219>添加运营备注</Button>
                <Button type="primary" icon="ios-create-outline" @click="showEditImportantNote(orderDetail)" class="y_condition"
                        v-has=tRole.ORDER_1_110 v-if="orderDetail.state >= 110 && orderDetail.state <= 140">修改重要说明</Button>
              </i-col>
            </Row>
            <Row>
              <i-col :xs="24" :sm="12"  v-has=tRole.ORDER_1_223><span class="key">收件人 :</span>{{$tiyHideUsername(orderDetail.receiverInfo.userFullName)}}
                <Button type="info"  size="small" icon="md-copy" ghost @click="copy(orderDetail.receiverInfo.userFullName)"> copy
                </Button>

              </i-col>
              <i-col :xs="24" :sm="12" v-has=tRole.ORDER_1_206><span class="key">联系电话 :</span>{{$tiyHidePhone(getReceiverPhone(orderDetail.receiverInfo))}}
                <Button type="info"  size="small" icon="md-copy" ghost @click="copy(getReceiverPhone(orderDetail.receiverInfo))"> copy
                </Button>
              </i-col>
            </Row>
            <Row>
              <i-col :xs="24" :sm="8" ><span class="key">配送方式 :</span>
                <span v-if="isNotEmpty(orderDetail.receiverInfo.shippingInfosV38) && isNotEmpty(orderDetail.receiverInfo.shippingInfosV38[0]) && isNotEmpty(orderDetail.receiverInfo.shippingInfosV38[0].name)">
                  {{orderDetail.receiverInfo.shippingInfosV38[0].name}}</span>
                <span v-else>{{getDictName('postageMethodDict',orderDetail.deliveryMethod)}}</span>
              </i-col>
              <i-col :xs="24" :sm="16" v-if="isNotEmpty(orderDetail.receiverInfo.shippingInfosV38) && isNotEmpty(orderDetail.receiverInfo.shippingInfosV38[0]) && isNotEmpty(orderDetail.receiverInfo.shippingInfosV38[0].innerNote)">
                <span class="key">运费备注 :</span>
                  {{orderDetail.receiverInfo.shippingInfosV38[0].innerNote}}
              </i-col>
            </Row>
            <row style="margin-left:2rem;width:65%;">
              <List style="width:100%;" v-if="orderDetail.innerNoteList.length>0" header="运营备注 :" border size="small">
                <ListItem v-for="(item,index) in orderDetail.innerNoteList" >
                  <row  style="width:100%;">
                    <i-col  span="24">
                      <span style="font-weight: bold;">{{index+1}}.</span><span > {{item.content}}</span>
                      <span style="float:right"><tag color="red">{{item.employeeName}}</tag> {{getFormatedDateTime(item.createtime)}}</span>
                    </i-col>
                  </row>

                </ListItem>
              </List>
            </row>
            <hr>
            <Row>
              <table class="table-desc">
                <tr v-if="orderDetail.logisticsInvoiceType">
                  <td class="key" style="width: 110px;">物流报税方式 :</td>
                  <td>{{getLogisticsInvoiceType(orderDetail.logisticsInvoiceType)}}</td>
                  <td v-if="orderDetail.logisticsInvoiceType == 200"><span class="key">报税金额 :</span><span>${{orderDetail.logisticsInvoiceAmount}}</span></td>
                </tr>
                <tr v-if="isNotEmpty(orderDetail.taxNumber)">
                  <td class="key" style="width: 110px;">税号 :</td>
                  <td>{{orderDetail.taxNumber}}</td>
                  <td v-if="isNotEmpty(orderDetail.businessName)"><span class="key">企业名 :</span><span>{{orderDetail.businessName}}</span></td>
                </tr>
                <tr v-if="orderDetail.shortageOption">
                  <td class="key" style="width: 110px;">缺货处理方式 :</td>
                  <td v-if="orderDetail.shortageOption == 100"><span>正常发货，缺货产品退款。（Send in stock products directly and add credit to your account for out of stock items.）</span></td>
                  <td v-if="orderDetail.shortageOption == 200"><span>联系客户。（Inform you the shortage detail, wait for your decision (This option may cause 2 days delay in delivery).）</span></td>
                </tr>
                <tr v-if="isNotEmpty(orderDetail.note)">
                  <td class="key" style="width: 110px;">用户备注 :</td>
                  <td colspan="2">{{orderDetail.note}}</td>
                </tr>
                <tr v-if="isNotEmpty(orderDetail.importantNote)">
                  <td class="key" style="width: 110px;">重要说明 :</td>
                  <td colspan="2"><pre style="margin: 0; padding: 0;">{{orderDetail.importantNote}}</pre></td>
                </tr>
              </table>
            </Row>
            <hr>
            <Row>
              <i-col span="24" v-has=tRole.ORDER_1_224>
                <span class="base_key">Apt/Suite/Unit :</span> {{orderDetail.receiverInfo.unit}}
                <span class="base_key" style="margin-left: 0.5rem">Street Address :</span> {{orderDetail.receiverInfo.streetAddress}}
                <span class="base_key" style="margin-left: 0.5rem">City :</span> {{orderDetail.receiverInfo.cityName}}
                <span class="base_key" style="margin-left: 0.5rem">State :</span> {{orderDetail.receiverInfo.state}}
                <span class="base_key" style="margin-left: 0.5rem">Country :</span> {{orderDetail.receiverInfo.countryName}}
                <span class="base_key" style="margin-left: 0.5rem">Country Code :</span> {{orderDetail.receiverInfo.countryCode}}
                <span class="base_key" style="margin-left: 0.5rem">Zip Code :</span> {{orderDetail.receiverInfo.postalCode}}
              </i-col>
            </Row>
          </Card>
        </TabPane>
        <TabPane label="包裹概况" name="shipping" style="font-size: 14px">
          <Row style="margin-bottom: 16px;" type="flex" justify="end">
            <i-col span="24" class="y_query_right">
              <Button type="default" @click="showOrderRecord" icon="md-information-circle" class="y_condition">查看订单记录</Button>
              <Button type="primary" @click="cancelUnconfirmedOrder()" icon="ios-remove-circle"  class="y_condition"
                      v-if="orderDetail.state === 116 && !orderDetail.isHistoryOrder" v-has=tRole.ORDER_1_209>取消订单（款项未到账）
              </Button>
              <Button type="primary"  class="y_condition" @click="showRefusePayment()" icon="md-sad" v-has=tRole.ORDER_1_226
                      v-if="orderDetail.checkoutTime != null && orderDetail.state !== 120
                      && orderDetail.state !== 150 && orderDetail.state !== 200 && !orderDetail.isHistoryOrder">用户拒付
              </Button>
              <Button type="primary"  class="y_condition"  @click="showRefundModal" icon="ios-undo"
                      v-if="orderDetail.state === 113 && !orderDetail.isHistoryOrder" v-has=tRole.ORDER_1_210>整单退款
              </Button>
              <Button type="primary"  class="y_condition" @click="orderDeliver(0)" icon="ios-plane"
                      v-if="orderDetail.state === 114 && !orderDetail.isHistoryOrder" v-has=tRole.ORDER_1_211>整单发货
              </Button>
              <Button type="primary"  class="y_condition"  @click="showRefundShippingModal" icon="ios-undo"
                      v-if="refundPostageEnable" v-has=tRole.ORDER_1_229>退运费
              </Button>
            </i-col>
          </Row>
          <Collapse v-model="openCollapse" style="margin-top: 20px">
            <Panel v-for="(pck, index) in orderDetail.packages" :key="index">
              <span >
                <span style="margin-left:0.5rem " v-if="pck.state === 101 || pck.state >= 130" >
                  包裹（运单号）:{{pck.waybill}}
                </span>
                  <span v-else style="width: 100px">{{getDictName('packageStateDict',pck.state)}}</span>
              </span>

              <div slot="content">

                <Row>
                   <i-col span="24"  v-if="pck.state === 101 || pck.state >= 130">
                     <span style="margin-left:1rem "class="key">运单号:</span>{{pck.waybill}}
                     <span style="margin-left:20px " class="key"> 状态:</span> <b>{{getDictName('packageStateDict',pck.state)}}</b>
                     <span style="margin-left:20px " class="key"> 快递公司:</span> <b>{{pck.deliveryCompanyName}}</b>
                  </i-col>
                </Row>

                <Row v-if="pck.serialNumber != null && pck.serialNumber !== ''" type="flex" justify="end">
                  <i-col span="4" style="text-align: left;">
                    <Checkbox :ref="'check_all_'+pck.id" @on-change="checked=>handleCheckAll(checked, pck.id)" class="y_condition">全选</Checkbox>
                  </i-col>
                  <i-col span="20" v-if="pck.waybill" class="y_query_right">
                    <Button type="default" @click="showPackageRecord(pck)" icon="md-information-circle" class="y_condition">查看包裹记录</Button>

                    <Button type="info" @click="trackPackage(pck)" icon="md-search" class="y_condition" v-has=tRole.ORDER_1_215 v-if="!orderDetail.isHistoryOrder">跟踪包裹
                    </Button>

                    <Button type="info" @click="changeWaybill(pck)" icon="md-hammer" class="y_condition"
                            v-if="pck.state === 101 && !orderDetail.isHistoryOrder" v-has=tRole.ORDER_1_216>修改运单号
                    </Button>
                  </i-col>
                </Row>
                <Row type="flex" justify="end" v-else-if="pck.state === 103 && !orderDetail.isHistoryOrder" >
                  <Col span="2" pull="14">
                    <Checkbox :ref="'check_all_'+pck.id" @on-change="checked=>handleCheckAll(checked, pck.id)">全选</Checkbox>
                  </Col>
                  <i-col span="4">
                    <Button type="primary" @click="orderDeliver(1, pck.id)" icon="ios-download-outline" v-has=tRole.ORDER_1_212>
                      拆单发货
                    </Button>
                  </i-col>
                  <i-col span="4">
                    <Button type="info" @click="showRefundItemsModal(pck.id)" icon="logo-usd" v-has=tRole.ORDER_1_213>提交缺货退款
                    </Button>
                  </i-col>
                </Row>
                <Row v-for="product in pck.products">
                  <i-col span="24">
                  <div class="order_product_div">
                    <Row class="order_product_row">
                      <i-col  :xs="4" :sm="3">
                        <img :src="yunPath + (product.zipImages != null ?product.zipImages[0].imagePath : product.originalImagePath)"
                             style="width:99%;max-width:80px;max-height:80px;"
                             @click="status.modalImage.url=yunPath + product.originalImagePath;status.modalImage.isShow = true;"/>
                      </i-col>
                      <i-col :xs="20" :sm="17">
                        <Row>
                          <strong><span style="margin-left:20px;" class="tiy_key_left">产品编码: </span>
                            <a target="_blank" :href="$tiyProductUrl(product.productCode)">{{product.productCode}}</a>
                          </strong>
                        </Row>
                        <Row style="margin-top: 0.2rem" v-mobile="false"><span style="margin-left:20px ">{{product.productName}}</span>
                        </Row>
                        <Row style="margin-top: 0.2rem">
                          <i-col :xs="24" :sm="7" ><span style="margin-left:20px " class="tiy_key_left">单价 :</span>${{product.actualPrice}}
                          </i-col>
                          <i-col :xs="24" :sm="5"  ><span style="margin-left:20px " class="tiy_key_left">重量 :</span>{{product.weight}}g
                          </i-col>
                          <i-col :xs="24"  :sm="{ span: 5, offset:2}"  class="y_query_right"
                          >
                            <Button type="text" icon="md-information-circle" @click="showProductSupply(product.id)" v-has=tRole.ORDER_1_225>查看货源</Button>
                          </i-col>
                        </Row>
                      </i-col>
                    </Row>
                    <Row><!--表格和分页-->
                      <i-col  span="24">
                      <Table :ref="'product'+pck.id+product.productCode" stripe border
                             :columns="orderItemTitles"
                             :data="product.items" class="table_css"
                             @on-selection-change="selection=>orderItemSelectedChanged(selection, pck.id)"
                             @on-select-all="selection=>orderItemSelectedChanged(selection, pck.id)"
                             @on-select-all-cancel="selection=>orderItemSelectedChanged(selection, pck.id)"
                             no-data-text="暂无数据" style="margin:0;"></Table>
                      </i-col>
                    </Row>
                  </div>
                  </i-col>
                </Row>
              </div>
            </Panel>
          </Collapse>
        </TabPane>
      </Tabs>
    </div>
    <!--拆分缺货订单项-->
    <Modal v-model="status.modalSubRefund.isShow" title="拆分缺货订单项"
           :closable="false" :mask-closable="false" @on-ok="splitItem()">
      <Form ref="params.subRefundOrderItem" :model="params.subRefundOrderItem" :label-width="100"
            class="modal_newuser_form">
        <FormItem label="退货数量" prop="number">
          <InputNumber v-model="params.subRefundOrderItem.number" :max="params.subRefundOrderItem.itemNumber" :min="1"
                       :precision="0" @on-change="refundNumberChange()" class="modal_form_input"></InputNumber>
        </FormItem>
        <FormItem label="退款金额" prop="refundPayment">
          <Input v-model.trim="params.subRefundOrderItem.refundPayment" class="modal_form_input"
                 @on-change="refundPaymentChange()" v-bind:readonly="status.modalSubRefund.refundReadonly"/>
        </FormItem>
      </Form>
    </Modal>

    <!-- 订单项退款 -->
    <Modal v-model="status.modalRefundItems.isShow" title="订单项退款"
           :closable="false" :mask-closable="false">
      <Form :label-width="100" :rules="refundRules" ref="refund" :model="refund"  >
        <span v-show="status.modalRefundItems.type == 1">对已选产品退款？</span>
        <FormItem label="退款原因" prop="note">
          <Input type="textarea" :rows="3" v-model.trim="refund.note" placeholder="请输入" maxlength="300"></Input>
        </FormItem>
        <FormItem label="退运费" prop="shippingFee" v-show="status.modalRefundItems.type==3" >
          <Input type="number" v-model.trim="refund.shippingFee" placeholder="请输入" ></Input>
        </FormItem>
<!--        <alert>订单产品全部退款时，默认同时退运费。</alert>-->
      </Form>
      <div slot="footer">
        <Button @click="hideRefundModal">取消</Button>
        <Button type="primary" @click="refundItems()">保存</Button>
      </div>
    </Modal>


    <!--发货-->
    <Modal
      v-model="status.modalDeliver.isShow" :title="status.modalDeliver.title"
      :closable="false" :mask-closable="false" :loading="status.modalDeliver.isLoading"
      @on-ok="webOrderDeliver('paramDeliver')">
      <Form ref="paramDeliver" :model="paramDeliver" :rules="ruleDeliver" :label-width="100"
            class="modal_newuser_form">
        <FormItem label="快递公司" prop="deliveryCompany">
          <Select v-model="paramDeliver.deliveryCompany" placeholder="请选择" :label-in-value=true
                  class="modal_form_input">
            <Option v-for="item in deliverCompanyList" :value="item.id" :key="item.id">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="运送单号" prop="waybill">
          <Input v-model.trim="paramDeliver.waybill" placeholder="请输入"
                 class="modal_form_input"></Input>
        </FormItem>
      </Form>
    </Modal>

    <!--查看订单项记录弹出框-->
    <Modal v-model="status.modalRecord.isShow" :title="status.modalRecord.title"
           :styles="{align:'center',width:'60%',padding:'2rem'}" :scrollable=true>
      <Row v-if="status.modalRecord.recordType == 3">
        <i-col span="8">
          <div><span class="key">产品编号 :</span> {{status.modalRecord.info.productCode}}</div>
        </i-col>
        <i-col span="8">
          <div><span class="key">产品色卡 :</span> {{status.modalRecord.info.productColor}}</div>
        </i-col>
        <i-col span="8">
          <div><span class="key">尺码 :</span> {{status.modalRecord.info.productSize}}</div>
        </i-col>
      </Row>
      <!--表格和分页-->
<!--      <Table stripe border :context="this" :columns="recordDetailTitles" :data="selectRecordList"
             class="table_css"
             no-data-text="暂无数据"></Table>-->
      <List border="true" style="margin-top: 1rem;margin-bottom: 1rem;">
        <template v-if="selectRecordList.length == 0">
          <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
        </template>
        <list-item class="list_item" v-for="(item,index) in selectRecordList">
          <div style="width:100%;padding: 0 0.5rem;"  >
            <Row type="flex" justify="space-between">
              <i-col flex="auto" style="text-align: left" >
                <KeyValueView>#{{index+1}}</KeyValueView>
                <KeyValueView title="操作后状态" >{{item.stateName}}</KeyValueView>
                <KeyValueView  title="操作人" >{{ item.operator}}</KeyValueView>
                <KeyValueView  title="操作时间" >{{$tiyBJTime(item.createtime)}}</KeyValueView>
              </i-col>
            </Row>
          </div>
        </list-item>
      </List>
    </Modal>
    <!--查看图片弹出框-->
    <Modal v-model="status.modalImage.isShow" title="" :styles="{align:'center'}" :scrollable=true>
      <div slot="footer"></div>
      <div align="center"><Img :src="status.modalImage.url" style="max-width: 300px"/></div>
    </Modal>

    <!--折扣-->
    <Modal v-model="status.modalDiscount.isShow" :title="status.modalDiscount.title"
           :closable=true :styles="{align:'center',width:'50%',}" :scrollable=true>
      <!--表格和分页-->
<!--      <Table stripe border :context="this" :columns="discountTitles" :data="discountList"
             class="table_css" no-data-text="暂无数据"></Table>-->
      <List border="true" style="margin-top: 1rem;margin-bottom: 1rem;">
        <list-item class="list_item" v-for="(item,index) in discountList">
          <div style="width:100%;padding: 0 0.5rem;"  >
            <Row type="flex" justify="space-between">
              <i-col flex="auto" style="text-align: left" >
                <KeyValueView>#{{index+1}}</KeyValueView>
                <KeyValueView title="折扣类型" >{{item.discountType==1?'订单满减':(item.discountType==4?'优惠券':'')}}</KeyValueView>
                <KeyValueView  title="折扣名称" >{{ item.content}}</KeyValueView>
                <KeyValueView  title="折扣金额" >${{item.amount}}</KeyValueView>
              </i-col>
            </Row>
          </div>
        </list-item>
      </List>

    </Modal>

    <!--跟踪包裹-->
    <Modal v-model="status.modalTracking.isShow" :title="status.modalTracking.title"
           :closable=true :styles="{align:'center',width:'60%',}" :scrollable=true>
      <Row v-for="item in status.modalTracking.info">
        <i-col span="30">
          <div>{{item.acceptTime}} : {{item.acceptInfo}}</div>
        </i-col>
      </Row>
    </Modal>

    <!--修改运营备注-->
    <Modal v-model="status.modalInnerNote.isShow" title="添加运营备注"
           :closable="false" :mask-closable="false" @on-ok="modifyInnerNote()">
      <Form ref="params.modifyInnerNote" :model="params.modifyInnerNote" label-colon :label-width="80"
            class="y_condition">
        <FormItem label="运营备注" prop="innerNote">
          <Input type="textarea" v-model.trim="params.modifyInnerNote.innerNote" style="width: 360px;margin-right: 10px;" :rows="5"/>
        </FormItem>
      </Form>
    </Modal>

    <!--修改重要说明-->
    <Modal v-model="status.modalImportantNote.isShow" title="修改重要说明"
           :closable="false" :mask-closable="false" @on-ok="modifyImportantNote()">
      <Form ref="params.modifyImportantNote" :model="params.modifyImportantNote" label-colon :label-width="80">
        <FormItem label="重要说明" prop="importantNote">
          <Input type="textarea" v-model.trim="params.modifyImportantNote.importantNote" :rows="5" style="width: 90%;"/>
          <Icon type="ios-close-circle" @click="clearImportantNote()" style="position: absolute; margin-left: -18px; margin-top: 5px;"/>
        </FormItem>
      </Form>
    </Modal>

    <!--订单款项记录-->
    <Modal v-model="status.modalPaymentRecordShow" title="订单款项明细"
           :closable=true :styles="{align:'center',width:'70%',}" :scrollable=true>
      <!--表格和分页-->
<!--      <Table stripe border :context="this" :columns="paymentRecordTable" :data="orderPaymentRecordsList"-->
<!--             class="table_css" no-data-text="暂无数据"></Table>-->
      <List border="true" style="margin-top: 1rem;margin-bottom: 1rem;">
        <list-item class="list_item" v-for="(item,index) in orderPaymentRecordsList">
          <div style="width:100%;padding: 0 0.5rem;"  >
            <Row type="flex" justify="space-between">
              <i-col flex="auto" style="text-align: left" >
                <KeyValueView>#{{index+1}}</KeyValueView>
                <KeyValueView title="时间" >{{$tiyBJTime(item.createtime)}}</KeyValueView>
                <KeyValueView  title="收款/退款" >{{ item.payOrRefund ? '收款' : '退款'}}</KeyValueView>
                <KeyValueView  title="发生金额" >${{Math.abs(item.actualPayment)}}</KeyValueView>
                <KeyValueView  title="运费" >${{ Math.abs(item.postage)}}</KeyValueView>
                <KeyValueView  title="原因" >{{ item.payOrRefund?'订单支付':refundReasonDict.filter(i=>i.value==item.refundReason)[0].name}}</KeyValueView>
              </i-col>
            </Row>
          </div>
        </list-item>
      </List>
      <div slot="footer">
        <Button type="primary" @click="status.modalPaymentRecordShow = false;">确定</Button>
      </div>
    </Modal>

    <!--查看产品货源弹出框-->
    <Modal v-model="status.modalSupply.isShow" title="产品货源"
           :styles="{align:'center',width:'70%',padding:'2rem'}" :scrollable=true>
      <!--表格和分页-->
<!--      <Table stripe border :columns="productSupplyTable" :data="tData.productSupplyList"
             class="table_css" no-data-text="暂无数据"></Table>-->
      <List border="true" style="margin-top: 1rem;margin-bottom: 1rem;">
        <template v-if="tData.productSupplyList.length == 0">
          <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
        </template>
        <list-item class="list_item" v-for="(item,index) in tData.productSupplyList">
          <div style="width:100%;padding: 0 0.5rem;"  >
            <Row type="flex" justify="space-between">
              <i-col flex="auto" style="text-align: left" >
                <KeyValueView>#{{index+1}}</KeyValueView>
                <KeyValueView title="采购渠道" >{{getSupplySourceType(item.source)}}</KeyValueView>
                <KeyValueView title="参考价格" >{{ item.referencePrice}}</KeyValueView>
                <KeyValueView title="创建时间" >{{$tiyBJTime(item.createtime)}}</KeyValueView>
                <KeyValueView oneline title="标题" >{{ item.name}}</KeyValueView>
                <KeyValueView v-if="item.url.startsWith('http')" oneline title="采购链接" >
                  <a style="padding:6px;font-size:13px" target="_blank" :href="item.url">{{item.url}}</a>
                </KeyValueView>
              </i-col>
            </Row>
          </div>
        </list-item>
      </List>
    </Modal>

    <!--用户拒付弹出框-->
    <Modal v-model="status.modalRefusePayment.isShow" title="设置用户拒付"
            :scrollable=true  @on-ok="refusePayment()">
      <Row>
        <p><span class="key">支付方式 : </span> {{getDictName('payTypeDict',orderDetail.payWay)}}</p>
      </Row>
      <Form ref="refusePayment" :model="params.refusePayment" :label-width="120" class="modal_newuser_form">
        <Alert type="warning">请根据支付平台调整拒付手续费。</Alert>
        <FormItem label="拒付手续费($) : " prop="poundage">
          <Input type="number" v-model.trim="params.refusePayment.poundage" class="modal_form_input"/>
        </FormItem>
      </Form>
    </Modal>

    <!-- 查看订单项，导出发票 -->
    <Modal v-model="status.modalExportInvoice.isShow" title="导出发票" :mask-closable="false">
      <Form label-colon label-position="right" :label-width="120">
        <FormItem label="收件人企业名称">
          <Input v-model="params.exportInvoice.companyName" placeholder="企业名称" style="width: 350px;"></Input>
        </FormItem>
        <FormItem label="订单项状态">
          <CheckboxGroup v-model="params.exportInvoice.selectedOrderItemStates">
            <Checkbox v-for="(state, index) in orderItemStates" :label="state.key">{{state.name}}</Checkbox>
          </CheckboxGroup>
        </FormItem>
      </Form>
      <div style="color: #ff9900; font-size: 14px;">注：发票导出时只导出所选状态的产品</div>
      <div slot="footer">
        <Button @click="status.modalExportInvoice.isShow = false;">取消</Button>
        <Button type="primary" @click="exportInvoice()">导出</Button>
      </div>
    </Modal>

    <!-- 线下收款确认 -->
    <Modal v-model="status.modalConfirmOffline.isShow" title="线下收款确认" :mask-closable="false" @on-ok="confirmOffline()">
      <Form ref="confirmOffline" label-colon :model="paramConfirmOffline" label-position="right" :label-width="120" :rules="status.confirmOfflineRules">
        <FormItem label="收款方式" prop="payway">
          <Select v-model="paramConfirmOffline.payway" placeholder="请选择" class="modal_form_input" >
            <Option value=410 >电子转账</Option>
          </Select>
        </FormItem>
        <FormItem label="固定手续费" prop="fixedPoundage">
          <InputNumber type="number" v-model.trim="paramConfirmOffline.fixedPoundage" placeholder="请输入" class="modal_form_input" :precision=2 :min=0></InputNumber>
        </FormItem>
        <Alert type="warning">浮动手续费和浮动手续费比例根据收款情况填写。</Alert>
        <FormItem label="浮动手续费" prop="ratePoundage">
          <InputNumber type="number" v-model.trim="paramConfirmOffline.ratePoundage"class="modal_form_input" :precision=2 :min=0>></InputNumber>
        </FormItem>
        <FormItem label="浮动手续费比例" prop="rate">
          <InputNumber type="number" v-model.trim="paramConfirmOffline.rate" class="modal_form_input"
                       :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" :max="100" :precision=1 :min=0>></InputNumber>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="status.modalConfirmOffline.isShow = false;">取消</Button>
        <Button type="primary" @click="confirmOffline()()">确认</Button>
      </div>
    </Modal>

    <div slot="footer">
      <Button type="primary" @click="hide()">确定</Button>
    </div>
  </Modal>


</template>

<script>
  import tiyData from "./js/list/order_detail_data.js";
  import {isNotEmpty} from "../js/commonUtils.js"
  import {
    webOrderDetail,
    deliver,
    webDeliver,
    webExportOrderBlank,
    webExportInvoice,
    exportStandardInvoice,
    webItemRecord,
    trackPackage,
    showItemDiscounts,
    clearSelectedOrderItem,
    refundItems,
    splitItem,
    cancelUnconfirmedOrder,
    modifyInnerNote,
    modifyImportantNote,
    getPaymentRecords,
    showOrderDiscounts,
    showProductSupply,
    webOrderRecord,
    webPackageRecord,
    refusePayment,
    getCreditCard,
    confirmOffline,
    pendingOffline
  } from "./js/list/order_detail_fun.js";
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    name: "OrderDetail",
    props: {
      detailShow: {
        type: Boolean,
        default: false,
        require: true
      },
      orderId: {
        type: String,
        default: '',
        require: true
      }
    },
    data() {
      return {
        orderDetail: tiyData.tData.orderDetail,
        orderItemStates: [],
        status: tiyData.tStatus,
        isShow: false,
        params: tiyData.tParams,
        tData: tiyData.tData,
        ruleDeliver: tiyData.tStatus.rules,
        paramDeliver: tiyData.tParams.deliver,
        selectRecordList: tiyData.tData.selectRecord,
        discountList: tiyData.tData.discounts,
        orderPaymentRecordsList : tiyData.tData.orderPaymentRecords,
        tRole: {//权限
          ORDER_1_206: "ORDER-1-206",
          ORDER_1_207: "ORDER-1-207",
          ORDER_1_208: "ORDER-1-208",
          ORDER_1_209: "ORDER-1-209",
          ORDER_1_210: "ORDER-1-210",
          ORDER_1_211: "ORDER-1-211",
          ORDER_1_212: "ORDER-1-212",
          ORDER_1_213: "ORDER-1-213",
          ORDER_1_215: "ORDER-1-215",
          ORDER_1_216: "ORDER-1-216",
          ORDER_1_217: "ORDER-1-217",
          ORDER_1_219: "ORDER-1-219",
          ORDER_1_220: "ORDER-1-220",
          ORDER_1_223: "ORDER-1-223",
          ORDER_1_224: "ORDER-1-224",
          ORDER_1_225: "ORDER-1-225",
          ORDER_1_226: "ORDER-1-226",
          ORDER_1_110: "ORDER-1-110",
          ORDER_1_227: "ORDER-1-227",
          ORDER_1_228: "ORDER-1-228",
          ORDER_1_229: "ORDER-1-229",
          ORDER_1_230: "ORDER-1-230"
        },
        openCollapse: "0",
        orderStateDict: this.$store.getters.dictionaries.orderStateDict,
        //字典 包裹状态
        packageStateDict: this.$store.getters.dictionaries.packageStateDict,
        //字典 订单子项状态
        orderItemStateDict: this.$store.getters.dictionaries.orderItemStateDict,
        //字典 支付方式
        payTypeDict: this.$store.getters.dictionaries.payTypeDict,
        //字典 快运公司
        deliverCompanyList: this.$store.getters.dictionaries.deliverCompanyList,
        //字典 配送方式
        postageMethodDict: this.$store.getters.dictionaries.postageMethodDict,
        //字典 配送方式
        refundReasonDict: this.$store.getters.dictionaries.refundReasonDict,
        yunPath: this.$store.getters.imgPrefix,
        orderItemTitles: tiyData.tableTitles.tableOrderDetail(this),
        recordDetailTitles: tiyData.tableTitles.tableRecordDetail,
        discountTitles: tiyData.tableTitles.tableDiscount,
        paymentRecordTable : tiyData.tableTitles.tablePaymentRecord(this),
        productSupplyTable: tiyData.productSupplyTable(this),
        isCheckedAll : false,
        refundRules: tiyData.tStatus.refundRules,
        refund:tiyData.tParams.refund,
        paramConfirmOffline: tiyData.tParams.confirmOffline
      }
    },
    components:{KeyValueView},
    computed: {
      isExpanded() {
        return this.$store.state.base.isExpanded
      },
      userTag(){
        let userTabList=this.orderDetail.userTabList;
        let text='';
        if(userTabList!=undefined){
          for(let i=0;i<userTabList.length;i++){
            text+=userTabList[i].name+',';
          }
          if(text.length>0){
            text=text.substring(0,text.length-1);
          }
        }
        return text;
      },
      refundPostageEnable(){
        let ableList = [111, 112, 113, 114, 115,116, 130];

        if( !this.orderDetail.isHistoryOrder&&ableList.includes(this.orderDetail.state)){
          return true
        }
        return false
      },
      needBox(){
        if(this.orderDetail.needBox==-1){
          return "未配置";
        }else if(this.orderDetail.needBox==0){
          return "需要包装盒";
        }else if(this.orderDetail.needBox==1){
          return "赠品替换包装盒"
        }
      }
    },
    methods: {
      getSupplySourceType(source) {
        switch (source) {
          case 1:
            return "1688";
          case 2:
            return "淘宝";
          case 3:
            return "拼多多";
          case 4:
            return "线下";
          case 5:
            return "产品采集库";
          default:
            return "";
        }
      },
      switchExpand() {
        this.$store.commit('setUIExpanded', !this.isExpanded);
      },
      hide() {
        this.$emit("hideDetail")
      },
      orderItemSelectedChanged(packageSelection, packageId) { //一个订单可能会生成多个产品单项表，需要循环累加每个table中已选中的订单项
        tiyData.tStatus.modalDeliver.params.selectedOrderItem.splice(0, tiyData.tStatus.modalDeliver.params.selectedOrderItem.length);//先清零
        //不能跨包裹选择产品。跨包裹选择时清空已选项
        let endFor = false; //跨包裹选择结束循环
        let stockOutLength = 0; //出库订单项总数
        let checkedLength = 0; //已选择订单项总数
        for (let orderPackage of this.orderDetail.packages) {
          if (endFor) {
            // this.isCheckedAll = false;
            break;
          }
          for (let product of orderPackage.products) {
            let name = "product" + orderPackage.id + product.productCode;
            let selection = this.$refs[name][0].getSelection();
            if (selection && selection.length > 0) {
              if (packageId != orderPackage.id) {
                endFor = true;
                let self = this;
                this.$Modal.error({
                  title: "error",
                  content: "不能同时选择不同包裹里（或者同时选择未发货和已经发货的）的产品！",
                  width: 500,
                  onOk: function () {
                    clearSelectedOrderItem(self, tiyData);
                  }
                });
                break;
              }
              if(orderPackage.id == packageId){ //
                stockOutLength += product.items.length;
              }
              selection.forEach(function (item) {
                tiyData.tStatus.modalDeliver.params.selectedOrderItem.push(item);
                  if(orderPackage.id == packageId) { //
                      checkedLength ++;
                  }
              });
            }
          }
        }
        let checkAllName = "check_all_"+packageId;
        if(checkedLength == stockOutLength && checkedLength > 0){
          this.$refs[checkAllName][0].currentValue = true;
        } else {
          this.$refs[checkAllName][0].currentValue = false;
        }
      },
      orderDeliver(type, packageId) {
        if (type == 1 && (tiyData.tStatus.modalDeliver.params.selectedOrderItem.length <= 0
          || tiyData.tStatus.modalDeliver.params.selectedOrderItem[0].packageId != packageId)) {
          this.$Modal.error({
            title: "error",
            content: "请先选择需要发货的订单项！",
            width: 500,
            onOk: function () {
            }
          });
          return;
        }
        deliver(this, tiyData, type);
      },
      changeWaybill(editPackage) {
        if (tiyData.tStatus.modalDeliver.params.selectedOrderItem.length <= 0
          || tiyData.tStatus.modalDeliver.params.selectedOrderItem[0].packageId != editPackage.id) {
          this.$Modal.error({
            title: "error",
            content: "请先选择需要修改运单号的订单项！",
            width: 500,
            onOk: function () {
            }
          });
          return;
        }
        tiyData.tStatus.modalDeliver.params.packageId = editPackage.id;
        tiyData.tStatus.modalDeliver.params.orginalWaybill = editPackage.waybill;
        deliver(this, tiyData, 2);
      },
      webOrderDeliver(name) {//订单整单发货 拆单发货 修改已发货订单运单号
        webDeliver(this, tiyData, name);
      },
      //导出配货单
      webExportOrderBlank(order) {
        tiyData.tParams.exportOrder.id = order.id;
        tiyData.tParams.exportOrder.serialNumber = order.serialNumber;
        tiyData.tParams.exportOrder.userName = order.receiverInfo.userFullName;
        webExportOrderBlank(this, tiyData);
      },
      //导出发货单
      webExportInvoice(order) {
        tiyData.tParams.exportOrder.id = order.id;
        tiyData.tParams.exportOrder.serialNumber = order.serialNumber;
        tiyData.tParams.exportOrder.userName = order.receiverInfo.userFullName;
        webExportInvoice(this, tiyData);
      },
      invoiceExportable() {
        let ableList = [111, 112, 113, 114, 115, 130, 133, 140];
        return ableList.includes(tiyData.tData.orderDetail.state);
      },
      showExportInvoiceModal(order) {
        this.initOrderItemsStates();
        tiyData.tStatus.modalExportInvoice.isShow = true;
      },
      initOrderItemsStates() {
        tiyData.tParams.exportInvoice.companyName = "";
        this.orderItemStates.length = 0
        tiyData.tParams.exportInvoice.selectedOrderItemStates = [];
        if(tiyData.tData.orderDetail.packages != null && tiyData.tData.orderDetail.packages.length>0) {
          let stateKeys = [];
          for(let pac of tiyData.tData.orderDetail.packages) {
            for(let product of pac.products) {
              for(let item of product.items) {
                if(!stateKeys.includes(item.state)) {
                  stateKeys.push(item.state);
                }
              }
            }
          }
          stateKeys.sort(function (a, b) {return a-b;});
          for(let key of stateKeys) {
            this.orderItemStates.push({key: key, name: this.orderItemStateDict.filter(item => item.value == key)[0].name})
          }
        }
      },
      //导出发票
      exportInvoice() {
        if(tiyData.tParams.exportInvoice.selectedOrderItemStates.length > 0) {
          tiyData.tParams.exportInvoice.orderId = this.orderDetail.id;
          exportStandardInvoice(this, tiyData);
        }else{
          this.$Message.error("请先选择要导出的订单项的状态！");
        }
      },
      //订单操作记录
      showItemRecord(orderItem) {
          tiyData.tStatus.modalRecord.title = "订单项记录";
          tiyData.tStatus.modalRecord.recordType = 3;
        tiyData.tStatus.modalRecord.info.productCode = orderItem.productCode;
        tiyData.tStatus.modalRecord.info.productColor = orderItem.color;
        tiyData.tStatus.modalRecord.info.productSize = orderItem.sizeName;

        webItemRecord(this, tiyData, orderItem.id);
      },
      //包裹跟踪
      trackPackage(orderPackage) {
        tiyData.tParams.deliver.deliveryCompany = orderPackage.deliveryCompany;
        tiyData.tParams.deliver.waybill = orderPackage.waybill;
        trackPackage(this, tiyData);
      },
      //查看订单项优惠信息
      showItemDiscounts(orderItemId) {
        tiyData.tStatus.modalDiscount.title = "订单项折扣明细";
        showItemDiscounts(this, tiyData, orderItemId);
      },
      //订单退款
      showRefundItemsModal(packageId) {
        let refundRequesting = tiyData.tData.orderDetail.packages.filter(function(item) {
          return item.state == 105
        });
        if (refundRequesting.length > 0){
          this.$Modal.error({
            title: "error",
            content: "请先处理申请中的缺货退款！",
            width: 500,
            onOk: function () {
            }
          });
          return;
        }
        if ((tiyData.tData.orderDetail.state == 112 || tiyData.tData.orderDetail.state == 114)
          && tiyData.tStatus.modalDeliver.params.selectedOrderItem.length <= 0
          || tiyData.tStatus.modalDeliver.params.selectedOrderItem[0].packageId != packageId) {
          this.$Modal.error({
            title: "error",
            content: "请先选择需要退款的订单项！",
            width: 500,
            onOk: function () {
            }
          });
          return;
        }
        this.$refs["refund"].resetFields();
        tiyData.tParams.refund.shippingFee=0;
        tiyData.tParams.refund.note="";
        this.status.modalRefundItems.type=1;
        this.status.modalRefundItems.isShow = true;
      },

      //整单退款
      showRefundModal() {
        this.$refs["refund"].resetFields();
        tiyData.tParams.refund.shippingFee=0;
        tiyData.tParams.refund.note="";
        this.status.modalRefundItems.type=2;
        this.status.modalRefundItems.isShow = true;
      },
      //退运费
      showRefundShippingModal() {
        this.$refs["refund"].resetFields();
        tiyData.tParams.refund.shippingFee=0;
        tiyData.tParams.refund.note="";
        this.status.modalRefundItems.type=3;
        this.status.modalRefundItems.isShow = true;
      },


      refundItems() {
        refundItems(this, tiyData);
      },
      refundNumberChange() { //退货数量变化时重新计算退款金额
        let refundItem = this.params.subRefundOrderItem;
        if (refundItem.number == refundItem.itemNumber) {
          refundItem.refundPayment = refundItem.itemPayment;
          this.status.modalSubRefund.refundReadonly = true;
        } else {
          this.status.modalSubRefund.refundReadonly = false;
          refundItem.refundPayment = this._.round(refundItem.itemPayment * refundItem.number / refundItem.itemNumber, 3);
        }
      },
      refundPaymentChange() { //手动设置金额时保持小数点后2位
        let refundItem = this.params.subRefundOrderItem;
        refundItem.refundPayment = this._.round(refundItem.refundPayment, 2);
      },
      splitItem() { //拆分缺货产品
        let refundItem = this.params.subRefundOrderItem;
        let error;

        if (refundItem.number <= 0 || refundItem.number > refundItem.itemNumber) {
          error = "退货数量必须大于等于1并且不能超出此产品下单数量！";
        } else if (refundItem.refundPayment <= 0 || refundItem.refundPayment > refundItem.itemPayment) {
          error = "退款金额必须大于0，并且不能超过此产品总金额！";
        } else if (refundItem.number == refundItem.itemNumber && refundItem.state == 114) {
          error = "出库中的产品全部缺货时，不需要作拆分操作！";
        }

        if (error) {
          this.$Modal.error({
            title: "error",
            content: error,
            width: 500
          });
        } else {
          splitItem(this, tiyData);
        }
      },
      cancelUnconfirmedOrder() {//取消款项未到账订单
        this.$Modal.confirm({
          title: '取消订单',
          content: '<p>确认款项未到账，取消此订单？</p>',
          onOk: () => {
            cancelUnconfirmedOrder(this, tiyData);
          }
        });
      },
      getDictName(dict, value) {
        let cDict = this.$store.getters.dictionaries[dict];
        let name = "";
        if (cDict) {
          let dict = cDict.filter(function (item) {
            return item.value == value
          })
          if (dict.length > 0) {
            name = dict[0].name;
          }
        }
        return name;
      },
      getFormatedDateTime(time) {
        let formated = this.$tiyBJTime(time);
        return formated;
      },
      showEditNote(orderDetail){ //显示修改运营备注
        this.params.modifyInnerNote.id = orderDetail.id;
        this.params.modifyInnerNote.serialNumber = orderDetail.serialNumber;
        this.params.modifyInnerNote.innerNote = '';
        this.status.modalInnerNote.isShow = true;
      },
      showEditImportantNote(orderDetail) {
        this.params.modifyImportantNote.orderIds = [orderDetail.id];
        this.params.modifyImportantNote.importantNote = orderDetail.importantNote;
        this.status.modalImportantNote.isShow = true;
      },
      clearImportantNote() {
        this.params.modifyImportantNote.importantNote = "";
      },
      modifyInnerNote(){
        modifyInnerNote(this, tiyData);
      },
      modifyImportantNote() {
        modifyImportantNote(this, tiyData);
      },
      showPaymentRecord(orderDetail){ //显示订单款项记录
        getPaymentRecords(this, tiyData, orderDetail.id);
      },
      modalStatus(status){
        if(!status){
            this.$emit("hideDetail")
        }
      },
      //查看订单优惠信息
      showOrderDiscounts(orderId) {
        tiyData.tStatus.modalDiscount.title = "订单折扣明细";
        showOrderDiscounts(this, tiyData, orderId);
      },
        //查看产品货源信息
        showProductSupply(productId) {
            showProductSupply(this, tiyData, productId);
        },
        handleCheckAll(checked, packageId){ //处理已出库产品的全部选择事件。
            let isCheckedAll = checked; //先将是否选择全部保存到局部变量，后面设置选择时会改变此变量值
            tiyData.tStatus.modalDeliver.params.selectedOrderItem.splice(0, tiyData.tStatus.modalDeliver.params.selectedOrderItem.length);
            //全选时把所有的已出库订单项添加到已选择中
            for (let orderPackage of this.orderDetail.packages) {
                if(orderPackage.id == packageId) {
                  if(orderPackage.state == 103 || orderPackage.state == 101) { //
                    for (let product of orderPackage.products) {
                      let name = "product" + orderPackage.id + product.productCode;
                      this.$refs[name][0].selectAll(isCheckedAll);
                    }
                  }
                }
            }
        },
        showOrderRecord() {
            tiyData.tStatus.modalRecord.title = "订单记录";
            tiyData.tStatus.modalRecord.recordType = 1;
            webOrderRecord(this, tiyData, this.orderId);
        },
        showPackageRecord(orderPackage) {
            tiyData.tStatus.modalRecord.title = "包裹记录";
            tiyData.tStatus.modalRecord.recordType = 2;
            webPackageRecord(this, tiyData, this.orderId, orderPackage.id);
        },
        showRefusePayment(){
            switch (this.orderDetail.payWay) {
                case 112: //stripe信用卡拒付手续费为15美元，其它不变。
                    tiyData.tParams.refusePayment.poundage = 15;
                    break;
                default :
                    tiyData.tParams.refusePayment.poundage = 0.3;
                    break;
            }
            tiyData.tStatus.modalRefusePayment.isShow = true;
        },
        refusePayment(){
          // console.log(tiyData.tParams.refusePayment.poundage);
            if(tiyData.tParams.refusePayment.poundage <= 0 || tiyData.tParams.refusePayment.poundage > 15){
                this.$Modal.error({
                    content: "必须正确设置手续费"
                });
            } else {
                this.$Modal.confirm({
                    title: "确认",
                    content: "确认设置为用户拒付？拒付手续费： " + tiyData.tParams.refusePayment.poundage + "。",
                    onOk: () => {
                        refusePayment(this, tiyData);
                    }
                })
            }

        },
      isNotEmpty(val) {
        return isNotEmpty(val);
      },
      getLogisticsInvoiceType(type) {
        switch (type) {
          case 100:
            return "100%(full) order value";
          case 200:
            return "Declare custom value for me on the Commercial Invoice";
          case 300:
            return "By our experience, 20%-50% of real value";
        }
      },
      getReceiverPhone(receiverInfo) { //拼接收件人电话
        let phone = "";
        if(receiverInfo.countryPhoneCode){ //有国家电话区号
            phone += ("+" + receiverInfo.countryPhoneCode + " ");
        }
        if(receiverInfo.userPhoneNumber){
            phone += receiverInfo.userPhoneNumber;
        }
        return phone;
      },
      copy(text) {
          var self=this;
          this.$copyText(text).then(function (e) {
              self.$Message.success('复制成功');
          }, function (e) {
              self.$Message.error('复制失败');
          })
      },
      copyAddress(copyAddress){

        var receiverInfoCopy=copyAddress.userFullName+"\n";
        receiverInfoCopy=receiverInfoCopy+this.getReceiverPhone(copyAddress)+"\n";
        if(copyAddress.unit!=''){
          receiverInfoCopy= receiverInfoCopy+"Apt/Suite/Unit: "+copyAddress.unit+",";
        }
        receiverInfoCopy= receiverInfoCopy+"Street Address: "+copyAddress.streetAddress+", ";
        receiverInfoCopy= receiverInfoCopy+"City: "+copyAddress.cityName+",";
        receiverInfoCopy= receiverInfoCopy+"State: "+copyAddress.state+", ";
        receiverInfoCopy= receiverInfoCopy+"Country: "+copyAddress.countryName+", ";
        receiverInfoCopy= receiverInfoCopy+"Country Code: "+copyAddress.countryCode+", ";
        receiverInfoCopy= receiverInfoCopy+"Zip Code: "+copyAddress.postalCode;
        this.copy(receiverInfoCopy);
      },
      showCreditCard(orderId){
          getCreditCard(this, tiyData);
      },
      hideRefundModal(){
        tiyData.tStatus.modalRefundItems.isShow=false;
      },
      showOfflineConfirmModal(){
        let confireParams = tiyData.tParams.confirmOffline;
        confireParams.orderId = this.orderDetail.id;
        confireParams.serialNumber = this.orderDetail.serialNumber;
        confireParams.payway = 0;
        confireParams.fixedPoundage = 0;
        confireParams.ratePoundage = 0;
        confireParams.rate = 0;
        tiyData.tStatus.modalConfirmOffline.isShow = true;
      },
      confirmOffline(){
          confirmOffline(this, tiyData);
      },
      pendingOffline(){
        this.$Modal.confirm({
            title: '线下收款订单挂起',
            content: '<p>确认此订单为线下收款，并将状态改为"待确认收款"？</p>',
            onOk: () => {
                pendingOffline(this, tiyData);s
            }
        });
      }
    },
    watch: {
      detailShow: function (val) {
        //查询订单详情
        if (val) {
          webOrderDetail(this, tiyData, this.orderId)
        }
        this.isShow = val;
      }
    },
    mounted() {
    },
  }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

  .table_css {
    margin: 1rem 0px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_form_input {
    width: 140px;
    margin-right: 10px;
  }

  .order_product_div {
    margin-top: 1rem;

  }

  .order_product_row {
    background: #f3f3f6;
    padding: 1rem;
    border: .0625rem solid #dbdbdb;
    border-bottom-style: none;
  }

  .table-desc {
    margin-top: 10px;
    white-space:pre-line;
  }

  .key {
    .tiy_key;
    width: 110px;
    text-align: right;
  }
  .textarea-clear {
    margin-left: -20px;
  }

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
